<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>HTML to PDF Example</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			#content {
				/* width: 1600px; */
				/* margin: 10px auto; */
				text-align: center;
				font-size: 10px;
			}

			.border-t {
				letter-spacing: 2px;
				font-size: 20px;
			}

			.border-r {
				text-align: right;
				font-size: 14px;
				margin-top: 15px;
			}

			td {
				padding: 5px;
			}
		</style>
	</head>
	<body>

		<div id="content">
			<h4 class="border-t">标准储备溶液配制记录（有机类）</h4>
			<div class="border-r"> 使用天平编号：GZHB-222555559699</div>
			<table border="1" style=" margin: 0 auto;width: 100%;border-collapse: collapse;">
				<tr>
					<td rowspan="2">序号</td>
					<td colspan="3">标准品信息</td>
					<td colspan="10">标准储备液配制过程</td>
				</tr>
				<tr>
					<td style="width: 75px;">名称</td>
					<td>标准品编号</td>
					<td>标准品纯度/浓度( )</td>
					<td>标准品称量重量/体积( )</td>
					<td>溶剂</td>
					<td>定容体积( )</td>
					<td>标准储备液编号</td>
					<td>浓度( )</td>
					<td>配制日期</td>
					<td>有效期至</td>
					<td>储存条件</td>
					<td>配制人</td>
					<td>校核人/校核日期</td>
				</tr>
				<tr>
					<td>1</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>6</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>7</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>8</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>9</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>10</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>11</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td>12</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td colspan="14" style="font-size: 10px;text-align: left;">备注：
						1、此表适用于纯品配制成储备液、多种物质混合配制成储备液；2、纯品称重重量不得小于其证书要求的最小称样量；3、浓度位数保留4位有效数字；4、标准品纯度需代入计算</td>
				</tr>
			</table>
		</div>

		<button id="download-btn">下载 PDF</button>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
		<script>
			document.getElementById('download-btn').addEventListener('click', () => {
				const element = document.getElementById('content');
				
				// margin: PDF 的边距，单位为英寸，默认为 1 英寸。
				// filename: 下载时生成的文件名。
				// image: 配置图像类型和质量（例如：JPEG 图像，质量为 0.98）。
				// html2canvas: 用于绘制 HTML 元素的选项。scale 控制图像质量，通常设置为 2 可提高质量。
				// jsPDF: 设置页面的单位、格式（如 letter、a4）和方向（portrait 为纵向，landscape 为横向）。
				
				// 定义配置项
				const opt = {
					margin: 0.1, // 页面边距，单位是英寸
					filename: 'document.pdf', // PDF 文件名称
					image: {
						type: 'jpeg',
						quality: 0.98
					}, // 图像质量
					html2canvas: {
						scale: 5
					}, // 画布缩放，默认为1，增大此值可以提高 PDF 清晰度
					jsPDF: {
						unit: 'in',
						format: 'a4',
						orientation: 'landscape'
					} // 页面格式
				};

				// 使用 html2pdf 生成 PDF
				html2pdf(element, opt);

				// 使用 html2pdf 将 HTML 转换为 PDF
				// html2pdf()
				// 	.from(element)
				// 	.save('example.pdf'); // 保存 PDF 文件
			});
		</script>

	</body>
</html>